import QtQuick 2.11
import FluentUI

/**EMSearchBox.qml
  * FluAutoSuggestBox的封装文件，提供病人姓名搜索功能
  * 外部使用上应该设定宽和高，使用appendSearchData创建搜索内容
  * 监听itemClick来实现事件的监听
  *
  * 简单的使用示例:
        EMSearchBox{
            width: 200
            height: 40

            Component.onCompleted: {
                appendSearchData(["tacom", "tacom1", "t", "3"])
                appendSearchData(["tacom"])
            }

            onItemClick: (data)=>{
                console.log(data)
            }
        }
  */

Item {
    id: root
    signal itemClick(string name)
    property var searchArray: []

    FluAutoSuggestBox{
        anchors.fill: parent

        iconSource: FluentIcons.Search
        items: searchArray
        placeholderText: "input patient name"
        onItemClicked: (data)=>{
            root.itemClick(data.key)
        }

        onCommit: (data)=>{
            root.itemClick(data)
        }
    }

    function appendSearchData(dataArray){
        for(var i = 0; i < dataArray.length; i++){
            const appendItemName = dataArray[i]
            const appendIndex = findDataIndex(appendItemName)
            if(appendIndex === -1){
                searchArray.push({title: appendItemName, key: appendItemName})
            }
        }
    }

    function findDataIndex(key){
        for(var i = 0; i < searchArray.length; i++){
            if(searchArray[i].key === key){
                return i
            }
        }
        return -1
    }
}
